<template>
  <div>我今年的年纪 <input type="text" v-model.number="age" /></div>
  <div>我明年的年龄 {{ nextAge }}</div>
  <div>我后年的年龄 <input type="text" v-model.number="nextAge2" /></div>
  <h2>age当前值：{{ age }}</h2>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const age = ref(18)
// computed 返回计算后的新结果(结果也是响应式数据)
const nextAge = computed(() => {
  // 记得 return 返回计算结果
  return age.value + 1
})

// 后年年龄 - 复杂写法：常用于双向绑定计算
const nextAge2 = computed({
  get() {
    // age.value 变化时，计算出后年年龄 
    return age.value + 2
  },
  set(val: number) {
    // nextAge2 值变化时，基于用户设置的值，重新计算 age.value
    age.value = val - 2
  },
})
</script>
